/*
 * 淡入卡片组件 - Fade In Card Component
 * 提供带有淡入动画效果的文章卡片，支持图片、标题、描述等内容展示
 */

import React, { useEffect, useRef, useState } from 'react';
import { Card } from 'antd';
import styles from './index.less';

interface FadeInCardProps {
  title: string;
  abstractInfo: string;
  image?: string;
  link?: string;
  delay?: number;
  onClick?: () => void;
}

const FadeInCard: React.FC<FadeInCardProps> = ({
  title,
  abstractInfo,
  image,
  link,
  delay = 0,
  onClick
}) => {
  const [isVisible, setIsVisible] = useState(false);
  const cardRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setTimeout(() => {
            setIsVisible(true);
          }, delay);
          observer.unobserve(entry.target);
        }
      },
      {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
      }
    );

    if (cardRef.current) {
      observer.observe(cardRef.current);
    }

    return () => {
      if (cardRef.current) {
        observer.unobserve(cardRef.current);
      }
    };
  }, [delay]);

  const handleClick = () => {
    if (onClick) {
      onClick();
    } else if (link) {
      window.open(link, '_blank');
    }
  };

  return (
    <div
      ref={cardRef}
      className={`${styles.fadeInCard} ${isVisible ? styles.visible : ''}`}
      onClick={handleClick}
    >
      <Card
        hoverable
        className={styles.card}
        styles={{ body: { padding: 0 } }}
      >
        {/* 图片区域 */}
        {image && (
          <div className={styles.imageContainer}>
            <img alt={title} src={image} className={styles.cardImage} />
          </div>
        )}
        
        {/* 内容区域 */}
        <div className={styles.cardContent}>
          <h3 className={styles.cardTitle}>{title}</h3>
          <p className={styles.cardAbstract}>{abstractInfo}</p>
        </div>
      </Card>
    </div>
  );
};

export default FadeInCard;